<template>
  <div class="input-section">
    <div class="input-wrapper">
      <input 
        type="text" 
        v-model="inputText"
        placeholder="请输入任何问题"
        @keyup.enter="sendQuestion"
      >
      <div class="action-btns">
        <div class="send-btn" @click="sendQuestion">
          <svg class="send-icon" viewBox="0 0 24 24">
            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
          </svg>
        </div>
      </div> 
    </div>
    <!-- 添加错误提示 -->
    <div v-if="showError" class="error-message">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue';
import { useMedicalStore } from '@/store/medical';
import { sendMessage } from '@/utils/socket';  // 移除 initSocket 导入

const inputText = ref('');
const medicalStore = useMedicalStore();
const emit = defineEmits(['switch-to-chat']);
const isLoading = ref(false);

const isWebSocketReady = inject('webSocketStatus', ref(false));
const showError = ref(false);
const errorMessage = ref('');

// 显示错误信息的函数
const showErrorMessage = (message) => {
  errorMessage.value = message;
  showError.value = true;
  setTimeout(() => {
    showError.value = false;
  }, 3000); // 3秒后自动隐藏
};

// 发送问题的方法
const sendQuestion = async () => {
  const content = inputText.value.trim();
  if (!content || isLoading.value) return;

  if (!isWebSocketReady.value) {
    showErrorMessage('WebSocket 连接未打开，请稍后重试');
    return;
  }

  try {
    isLoading.value = true;
    const msgId = new Date().getTime().toString();
    
    const message = {
      "type": "SEND_TO_ONE_REQUEST",
      "body": {
        "toUser": "kfcs", 
        "msgId": msgId,
        "content": content
      }
    };

    await sendMessage(message);
    emit('switch-to-chat');
    inputText.value = '';
  } catch (error) {
    console.error('发送消息失败:', error);
    showErrorMessage('发送消息失败，请重试');
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped lang="scss">
.input-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: variables.$text-color-dark;
  // border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: variables.$bg-color;  
  border-radius: 24px;
  padding: 8px 12px;
  gap: 8px;
  border:#ccc solid 1px;
}

.voice-btn, .clip-btn, .send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.voice-btn:hover, .clip-btn:hover, .send-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

input {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 0;
  font-size: 14px;
  color: #333;
}

input::placeholder {
  color: #999;
}

input:focus {
  outline: none;
}

.action-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mic-icon, .clip-icon, .send-icon {
  width: 20px;
  height: 20px;
  fill: #666;
}
.send-icon {
  fill: #4a90e2;
  transform: rotate(-40deg); /* 这里设置倾斜角度为 45 度，你可以按需修改 */
}
/* 适配暗色模式 */
@media (prefers-color-scheme: dark) {
  .input-wrapper {
    background: #2c2c2c;
  }

  input {
    color: variables.$text-color;
  }

  input::placeholder {
    color: #888;
  }

  .mic-icon, .clip-icon {
    fill: #888;
  }
}

.received-message {
  margin-top: 10px;
  color: #333;
}

.error-message {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
</style>